﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome图标 -->
    <link rel="stylesheet" href="static/plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons图标 -->
    <link rel="stylesheet" href="static/plugins/Ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="static/dist/css/AdminLTE.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="static/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="static/css/liststyle.css">
    <script src="static/js/jquery-3.4.1.min.js"></script>

    <script src="static/js/vue.js"></script>
    <!--element-ui-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

        <header class="main-header">
            <!-- Logo -->
            <a href="index.html" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini">主页</span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>后台</b>主页</span>
            </a>
            <!-- 头部导航条: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>

                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="static/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                                <span class="hidden-xs">系统管理员</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="static/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                                    <p>
                                        系统管理员 - IT管理部
                                        <small>入职时间：2011-01-01</small>
                                    </p>
                                </li>
                                <!-- Menu Body -->
                                <li class="user-body">
                                    <div class="row">
                                        <div class="col-xs-4 text-center">
                                            <a href="#">修改密码</a>
                                        </div>
                                    </div>
                                    <!-- /.row -->
                                </li>
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="#" class="btn btn-default btn-flat">个人信息</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="#" class="btn btn-default btn-flat">注销</a>
                                    </div>
                                </li>
                            </ul>
                        </li>


                    </ul>
                </div>
            </nav>
        </header>
        <!-- 左侧工具栏 -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- 用户面板 -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="static/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p>系统管理员</p>
                    </div>
                </div>

                <!-- 导航栏菜单-->
                <ul class="sidebar-menu" data-widget="tree">
                    <li class="header">导航栏</li>
                    <li class="active">
<<<<<<< HEAD
                        <a href="index.html">
=======
                        <a href="./index.html">
>>>>>>> bc264224f8fbf35abcf638ecf25acc1565267075
                            <i class="fa fa-th"></i> <span>主页</span>
                            <span class="pull-right-container">
                            </span>
                        </a>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-dashboard"></i> <span>权限管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li class=""><a href="#"><i class="fa fa-circle-o"></i> 角色列表</a></li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> 权限列表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-calendar"></i> <span>日历</span>
                            <span class="pull-right-container">
                                <small class="label pull-right bg-red">3</small>
                                <small class="label pull-right bg-blue">17</small>
                            </span>
                        </a>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-share"></i> <span>多级菜单</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="#"><i class="fa fa-circle-o"></i> 一级菜单</a></li>
                            <li class="treeview">
                                <a href="#"><i class="fa fa-circle-o"></i> 一级菜单
                                    <span class="pull-right-container">
                                        <i class="fa fa-angle-left pull-right"></i>
                                    </span>
                                </a>
                                <ul class="treeview-menu">
                                    <li><a href="#"><i class="fa fa-circle-o"></i> 二级菜单</a></li>
                                    <li class="treeview">
                                        <a href="#"><i class="fa fa-circle-o"></i> 二级菜单
                                            <span class="pull-right-container">
                                                <i class="fa fa-angle-left pull-right"></i>
                                            </span>
                                        </a>
                                        <ul class="treeview-menu">
                                            <li><a href="#"><i class="fa fa-circle-o"></i> 三级菜单</a></li>
                                            <li><a href="#"><i class="fa fa-circle-o"></i> 三级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#"><i class="fa fa-circle-o"></i> 一级菜单</a></li>
                        </ul>
                    </li>
                    <li class="header">标签</li>
                    <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>重要</span></a></li>
                    <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>警告</span></a></li>
                    <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>信息</span></a></li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- 页面内容区域 -->

        <div id="webContent" class="content-wrapper">
            <template>

                <div class="demo-input-suffix" @keydown.enter="Search">
                    <div style="margin-left: 20px;">
                        创建时间：
                        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" class="searchtxt"
                            v-model="SCreateTime">
                        </el-input>-
                        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" class="searchtxt"
                            v-model="ECreateTime">
                        </el-input>
                        药品商品名：
                        <el-input placeholder="请输入药品商品名" prefix-icon="el-icon-search" class="searchtxt"
                            v-model="DrugTradeName">
                        </el-input>
                    </div>
                    <div style="float: right;margin-right: 20px;">
                        <el-button type="primary" @click="Delete" icon="el-icon-delete"></el-button>
                        <el-button type="primary" @click="Search" icon="el-icon-search">搜索</el-button>
                    </div>
                </div>
                <div class="demo-input-suffix">
                    <!-- <div>
                    药品商品名：<input type="text" name="" v-model="DrugTradeName" id="">
                </div> -->
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column type="index" align="center" label="编号" width="50">
                        </el-table-column>
                        <el-table-column prop="DrugTradeName" label="药品商品名" width="120">
                        </el-table-column>
                        <el-table-column prop="DrugCommonName" label="药品通用名" width="120">
                        </el-table-column>
                        <el-table-column prop="DrugPrice" label="药品价格(￥)" width="120">
                        </el-table-column>
                        <el-table-column prop="DrugSpecifications" label="规格" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="DrugComponent" label="成分" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="FunctionalIndications" label="功能主治" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="PointsForAttention" label="注意事项" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="创建时间" width="120">
                            <template slot-scope="scope">{{ scope.row.CreateTime }}</template>
                        </el-table-column>
                        <el-table-column prop="" label="操作" align="center" width="300">
                            <template slot-scope="scope">
                                <!-- <el-button type="primary" @click="Details" icon="el-icon-edit"></el-button> -->
                                <el-button size="small" @click="Details(scope.row)">详情</el-button>
                                <el-button size="small" @click="Edit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>

                    </el-table>

            </template>


            <!-- /.主题内容 -->
            <!--分页-->
            <div class="block" style="position:absolute;right:0;bottom:40px">
                <!-- <span class="demonstration">直接前往</span> -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
                </el-pagination>
            </div>
        </div>

        <!-- /.页面内容区域 -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>Version</b> 2.4.0
            </div>
            <strong>Copyright &copy; 2020-2025 <a href="#">个人开发者-谢立波</a></strong> 版权所有
        </footer>

        <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
        <div class="control-sidebar-bg"></div>
    </div>
    <!-- ./wrapper -->
    <!-- jQuery 3 -->
    <script src="static/plugins/jquery/jquery.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="static/bootstrap/js/bootstrap.js"></script>
    <!-- AdminLTE App -->
    <script src="static/dist/js/adminlte.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="static/plugins/echarts/echarts.js"></script>
    <script>
<<<<<<< HEAD


        let userData = [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }];
=======
        let productData = [
            { "Id": 1, "DrugTradeName": "黄连上清丸", "DrugCommonName": "黄连上清丸", "DrugPrice": "10", "DrugSpecifications": "规格", "DrugComponent": " 黄连 10g 栀子 80g 连翘 80g", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2020-05-06" },
            { "Id": 2, "DrugTradeName": "杞菊地黄丸", "DrugCommonName": "杞菊地黄丸", "DrugPrice": "11", "DrugSpecifications": "规格", "DrugComponent": "枸杞子40g 菊花40g 熟地黄160g 山茱萸（制）80g 牡丹皮60g 山药80g 茯苓60g 泽泻60g", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2016-05-25" },
            { "Id": 3, "DrugTradeName": "六味地黄丸", "DrugCommonName": "六味地黄丸", "DrugPrice": "12", "DrugSpecifications": "规格", "DrugComponent": "熟地黄160g   山茱萸（制）80g   牡丹皮60g   山药80g   茯苓60g   泽泻60g", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2016-05-12" },
            { "Id": 4, "DrugTradeName": "八珍益母丸", "DrugCommonName": "八珍益母丸", "DrugPrice": "13", "DrugSpecifications": "规格", "DrugComponent": " 益母草 200g 党参 50g 白术（炒） 50g 茯苓 50g   甘草 25g 当归 100g 白芍（酒炒） 50g 川芎 50g   熟地黄 100g", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2012-05-06" },
            { "Id": 5, "DrugTradeName": "十全大补丸", "DrugCommonName": "十全大补丸", "DrugPrice": "14", "DrugSpecifications": "规格", "DrugComponent": "党参80g 白术（炒）80g 茯苓80g 炙甘草40g 当归120g 川芎40g 白芍（酒炒）80g 熟地黄120g 炙黄芪80g 肉桂20g", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2016-05-03" },
            { "Id": 6, "DrugTradeName": "补肾强身片", "DrugCommonName": "补肾强身片", "DrugPrice": "12", "DrugSpecifications": "规格", "DrugComponent": "淫羊藿、 菟丝子、金樱子、女贞子、狗脊（烫）", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2013-05-03" },
            { "Id": 7, "DrugTradeName": "感冒软胶囊", "DrugCommonName": "感冒软胶囊", "DrugPrice": "16", "DrugSpecifications": "规格", "DrugComponent": "麻黄，桂枝，荆芥穗，黄芩，苦杏仁，羌活，川芎，防风，白芷，石菖蒲，葛根，薄荷，当归，桔梗", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2014-05-03" },
            { "Id": 8, "DrugTradeName": "桂附地黄丸", "DrugCommonName": "桂附地黄丸", "DrugPrice": "12", "DrugSpecifications": "规格", "DrugComponent": "麻黄，桂枝，荆芥穗，黄芩，苦杏仁，羌活，川芎，防风，白芷，石菖蒲，葛根，薄荷，当归，桔梗", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2015-05-03" },
            { "Id": 9, "DrugTradeName": "归芍地黄丸", "DrugCommonName": "归芍地黄丸", "DrugPrice": "20", "DrugSpecifications": "规格", "DrugComponent": "麻黄，桂枝，荆芥穗，黄芩，苦杏仁，羌活，川芎，防风，白芷，石菖蒲，葛根，薄荷，当归，桔梗", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2012-05-03" },
            { "Id": 10, "DrugTradeName": "龙葵", "DrugCommonName": "龙葵", "DrugPrice": "20", "DrugSpecifications": "规格", "DrugComponent": "麻黄，桂枝，荆芥穗，黄芩，苦杏仁，羌活，川芎，防风，白芷，石菖蒲，葛根，薄荷，当归，桔梗", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2012-05-03" },
            { "Id": 11, "DrugTradeName": "地肤子", "DrugCommonName": "地肤子", "DrugPrice": "20", "DrugSpecifications": "规格", "DrugComponent": "麻黄，桂枝，荆芥穗，黄芩，苦杏仁，羌活，川芎，防风，白芷，石菖蒲，葛根，薄荷，当归，桔梗", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2012-05-03" },
            { "Id": 12, "DrugTradeName": "蒲公英", "DrugCommonName": "蒲公英", "DrugPrice": "20", "DrugSpecifications": "规格", "DrugComponent": "麻黄，桂枝，荆芥穗，黄芩，苦杏仁，羌活，川芎，防风，白芷，石菖蒲，葛根，薄荷，当归，桔梗", "FunctionalIndications": "功能主治", "PointsForAttention": "注意事项", "CreateTime": "2012-05-03" }
        ];

>>>>>>> bc264224f8fbf35abcf638ecf25acc1565267075

        let webcontent = new Vue({
            el: "#webContent",
            data: {
<<<<<<< HEAD
                tableData: userData,
                currentPage3: 5
            },
            created(){
                fetch("").then(response=>response.tojson())
                .then(json=>{
                    this.tableData=json.tableData
                })
=======
                tableData: productData,
                currentPage3: 10,
                SCreateTime: '',
                ECreateTime: '',
                DrugTradeName: ''
>>>>>>> bc264224f8fbf35abcf638ecf25acc1565267075
            }
            , methods: {
                handleSizeChange: function (val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange: function (val) {
                    console.log(`当前页: ${val}`);
                },
                handleSelectionChange: function (val) {
                    console.log(`当前页: ${val}`);
                },
                Details: function (row) {
                    console.log('details')
                    console.log(row)
                    console.log(row.Id)
                },
                Edit: function (row) {
                    console.log('edit')
                    console.log(row)
                    console.log(row.Id)
                },
                Search: function () {
                    console.log(this.DrugTradeName)
                    console.log(this.SCreateTime)
                    console.log(this.ECreateTime)
                },Delete:function(){
                    console.log('delete')
                }
            }

        })
    </script>
</body>

</html>